<template>
  <div class="userDetail">
    <ul>
      <li>
        <div class="icon">
          <Language />
        </div>
        <div class="info">
          <p>用户名 UserName</p>
          <input type="text" v-model="userInfo.username" />
        </div>
      </li>
      <li>
        <div class="icon">
          <UserBio />
        </div>
        <div class="info">
          <p>个性签名 Description</p>
          <input type="text" v-model="userInfo.bio" />
        </div>
      </li>
    </ul>
    <button @click="handleToUpdateUser()">修改信息</button>
  </div>
</template>

<script>
import UserBio from "./UserBio.vue"
// import Date from "./Date.vue"
import Language from "./Language.vue"
// import Email from "./Email.vue"
import { mapState, mapActions } from "vuex"
import { AppIdEnum } from "@/constant"
import api from "@/api"

export default {
  name: "userDetail",
  data() {
    return {
      createdAt: ""
    }
  },
  components: {
    UserBio,
    // Date,
    Language
    // Email
  },
  props: {
    userDetailData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    ...mapState(["userInfo", "token"])
  },
  methods: {
    ...mapActions(["openApp", "closeApp"]),
    handleToUpdateUser() {
      const username = this.userInfo.username
      const bio = this.userInfo.bio
      api.updateUserInfo(username, bio).then((res) => {
        let status = res.data.status
        //   console.log(res.data.user);
        if (status === 200) {
          this.$notify({
            title: "提示",
            message: res.data.message,
            type: "success",
            position: "top-right",
            duration: 1000
          })
          this.closeApp(AppIdEnum.UPDATEUSER)
          this.openApp(AppIdEnum.ABOUT)
        } else {
          this.$notify({
            title: "提示",
            message: res.data.message + "，请返回重新修改",
            type: "error",
            position: "top-right",
            duration: 1000
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.userDetail {
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    li {
      //   width: 30%;
      display: flex;
      align-items: center;
      border-radius: 5px;
      padding: 36px 20px;
      margin: 0 25px 40px;
      // box-shadow:0 1px 4px rgba(100, 94, 94, 0.2), 0 0 20px rgba(70, 68, 68, 0.1) inset;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      .icon {
        margin-right: 5px;
      }
      .info {
        display: flex;
        flex-direction: column;
        p {
          margin: 0 10px;
          line-height: 30px;
        }
        p:nth-child(1) {
          font-weight: bold;
          font-size: 16px;
        }
        input {
          padding: 10px;
          border: 1px solid #999;
          outline: none;
          border-radius: 0.4rem;
          margin-top: 3px;
        }
      }
    }
  }
  button {
    width: 150px;
    padding: 12px 10px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
    background: #439bf5;
    color: #fff;
    &:hover {
      box-shadow: 0 2px 8px #70afee;
    }
  }
}
</style>
